<!--头部版块-->
<app-page-header [pageHeaderInfo]="pageHeaderInfo" />
<div class="normal-table-wrap">
  <div nz-row [nzGutter]="[24, 24]">
    <div nz-col [nzLg]="24" [nzMd]="24" [nzSm]="24" [nzXl]="24" [nzXs]="24" [nzXXl]="24">
      <nz-card nzTitle="选择文件" class="m-b-10" [nzBodyStyle]="{ 'padding-bottom': 0 }">
        <app-water-mark />
        <nz-tabset [nzSelectedIndex]="tabIndex">
          <nz-tab (nzClick)="changeTab(0)" nzTitle="上传压缩包">
            <nz-upload
              [nzBeforeUpload]="beforeUpload"
              style="margin: 10px 10px"
              nzType="drag"
              [nzShowUploadList]="false"
              [nzMultiple]="false"
              [nzAction]="uploadUrl"
              nzName="file"
              [nzCustomRequest]="customRequest"
            >
              <p class="ant-upload-drag-icon">
                <i nz-icon nzType="inbox"></i>
              </p>
              <p class="ant-upload-text">拖拽或者点击上传文件</p>
              <p class="ant-upload-hint">支持单文件上传，请使用zip或者rar格式的压缩包</p>
            </nz-upload>
          </nz-tab>
          <nz-tab (nzClick)="changeTab(1)" nzTitle="上传图片">
            <!-- 在这里添加上传图片的内容 -->
            <nz-upload
              [nzBeforeUpload]="validateImageUpload"
              style="margin: 10px 10px"
              nzType="drag"
              [nzShowUploadList]="false"
              nzMultiple="true"
              [nzAction]="uploadImgUrl"
              nzName="files"
              [nzCustomRequest]="customRequest"
            >
              <p class="ant-upload-drag-icon">
                <i nz-icon nzType="inbox"></i>
              </p>
              <p class="ant-upload-text">拖拽或者点击上传图片</p>
              <p class="ant-upload-hint">支持多图片上传</p>
            </nz-upload>
          </nz-tab>
        </nz-tabset>
      </nz-card>

      <nz-card class="m-b-10" nzTitle="读取结果" [nzExtra]="extraTemplate" [nzBodyStyle]="{ 'padding-bottom': 0 }">
        <app-ant-table (changePageNum)="getCardInfo($event)" (changePageSize)="changePageSize($event)" style="margin: 10px 10px" [tableConfig]="tableConfig" [tableData]="cardInfos"></app-ant-table>
        <ng-template #extraTemplate>
          <button (click)="exportWordFile()" nz-button nzType="primary" [nzSize]="'small'" nzShape="round">
            <i nz-icon nzType="download"></i>
            导出word文件
          </button>
        </ng-template>
      </nz-card>
    </div>
  </div>
</div>

<nz-modal [(nzVisible)]="isVisibleResult" [nzMaskClosable]="false" [nzContent]="contentSetup" nzTitle="识别结果" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
  <ng-template #contentSetup>
    <div class="ml10 mr20 process-container">
      <ng-container *ngIf="currentPercentage !== 100 && currentPercentage > 0">
        <nz-progress class="process-container progress" [nzPercent]="currentPercentage" nzType="circle" [nzWidth]="80"></nz-progress>
      </ng-container>
      <ng-container *ngIf="currentPercentage === 100 && tableResult">
        <div class="result-container">
          <h1>导入结果</h1>
          <div class="summary">
            <span>
              图片总数:
              <strong>{{ tableResult.currenttableresult.totalsourcecount }}</strong>
            </span>
            <span>
              成功张数:
              <strong>{{ tableResult.currenttableresult.insertedcount }}</strong>
            </span>
            <span>
              失败张数:
              <strong>{{ tableResult.currenttableresult.failedcount }}</strong>
            </span>
          </div>
          <h2>失败信息:</h2>
          <ul class="error-list">
            <li style="cursor: pointer" (click)="previewImg(error.split('||')[1])" *ngFor="let error of showMessages; let i = index">{{ error.split('||')[0] }}点击可以预览图片！</li>
          </ul>

          <nz-pagination
            style="margin-top: 15px"
            [(nzPageIndex)]="currentMessageIndex"
            [nzPageIndex]="1"
            [nzTotal]="tableResult.currenttableresult.messages.length"
            (nzPageIndexChange)="messagePageChange()"
          ></nz-pagination>
        </div>
      </ng-container>
    </div>
  </ng-template>
</nz-modal>
